<template>
        <div class="page">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="grid-content bg-purple">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout=" prev, pager, next, jumper"
                :total="400"
              ></el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
export default{
    props:[

    ],

    name:'Page',
    
}
</script>

<style lang="scss" scoped>
  #top,
  #bottom {
    margin: 0 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    background: #5ff1cc;
    /*background: #d3dce6;*/
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    position: relative;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .article {
    height: 130px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-bottom: 8px ;
  }
  .el-row-1 {
    margin-top: 25px;
  }
  .swiper {
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
  }

  .dots {
    ul {
      display: flex;
      align-items: center;
      position: relative;
    }
    img {
      margin: 2px;
    }
    position: absolute;
    left: calc(50% - 36px);
    display: flex;
    align-items: center;
  }
  .swiper-dot-show {
    position: relative;
    left: 12px;
  }
  .bottom-group {
    /*margin-bottom: 300px;*/
  }
  .bottom-group-1 {
    margin-top: 50px;
    position: relative;
    h1 {
      /*float: left;*/
      border-bottom: 1px solid #8f949a;
    }
    span {
      font-size: 13px;
      position: absolute;
      right: 0;
      top: 20px;
      cursor: pointer;
    }
    span:hover {
      color: #108de9;
    }
  }
  .bottom-group-list {
    padding: 20px 10px;
    h3 {
      margin-bottom: 30px;
      margin-top: 20px;
    }
    li {
      border-bottom: 1px solid #e0e0e0;
    }
  }
  .bottom-group-list-content {
    font-size: 14px;
    span {
      display: block;
      margin: 60px 0 10px;
      color: #bdbdbd;
      font-size: 12px;
    }
  }
  .block {
    text-align: center;
  }
  .page {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
  }
  .border {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin: 20px 0;
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .btn-p{
    height: 70px;
    width: 70px;
    border: 1px solid;
    border-radius: 50%;
    position: relative;;
    // z-index: 99;
    box-shadow: 0 2px 5px #616161;
    span{
      position: absolute;
      left: calc(50% - 27px);
      top:calc(50% - 5px)
    }
  }
  .entrance{
    position: fixed;
    bottom: 200px;
    right: 0;
  }
  .router{
    text-decoration: none;
    color:#108de9;
  }
  // .router

</style>
